
<!--
 * @Author: 梁 卓
 * @Version: V1.0.0
 * @Date: 2024-02-08 11:44:42
 * @LastEditors: 梁 卓
 * @LastEditTime: 2024-02-17 22:42:15
 * @FilePath: Price.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-02-08 11:44:42
 * @Description: 最新报价
-->
<template>
  <div>
    <el-row>
      <el-col :span="7">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地区：
        <el-select v-model="queryParams.county" @change="changeCountyEvent" clearable placeholder="请选择地区">
          <el-option
            v-for="item in countyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        市场：
        <el-select v-model="queryParams.marketId" @clear="marketClearEvent" clearable placeholder="请选择市场">
          <el-option
            v-for="item in marketOptions"
            :key="item.agrMarket.marketId"
            :label="item.agrMarket.marketName"
            :value="item.agrMarket.marketId">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        产品：
        <el-cascader
          placeholder="试试搜索功能"
          :options="productOptions"
          :props="props"
          v-model="queryParams.productItem"
          filterable></el-cascader>
      </el-col>
      <el-col :span="4">
        <el-row>
            <el-col :span="12">
              <el-button type="primary" @click="search">&nbsp;查 找&nbsp;</el-button>
            </el-col>
            <el-col :span="12">
              <el-button plain @click="reset">&nbsp;重 置&nbsp;</el-button>
            </el-col>
          </el-row>
      </el-col>
    </el-row>
    <div class="content" v-loading="loadingStatus">
      <div v-if="productMarketPriceList.length > 0 ? false : true" style="margin-top: 15%;">
        <span style="color: rgb(236, 113, 113); font-weight: bold;">暂无相关市场产品价格</span>
      </div>
      <div class="card-container" v-if="productMarketPriceList.length > 0 ? true : false">
        <div class="card-item" v-for="(item, index) in productMarketPriceList" :key="index">
          <el-card :body-style="{ padding: '0px' }" v-if="productMarketPriceList.length > 0 ? true : false">
            <img :src="item.agrFile == null ? (baseUrl + noRelevantPictures) : (baseUrl + item.agrFile.filePath)" class="image">
            <div style="padding: 14px;">
              <span>{{item.product.productName}}</span><br/>
              <span>{{item.market.marketName}}</span><br/>
              <span>{{item.price.price}} &nbsp; {{ item.product.unitMeasure }}</span>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {selectAllProductAndImg, getPlaceList, getMarketByCounty, getRecentlyPrice} from "@/api/price"
// 引入图片基础url
import store from '@/store'
export default {
  name: 'price',

  data() {
    return {
      // value: "returnValue" 用于得到的返回值类型
      props: { value: "returnValue" },
      countyOptions:[],
      productOptions: [],
      marketOptions: [],
      queryParams: {
        county: null,
        marketId: null,
        productId: null,
        productItem: null,
      },
      productMarketPriceList: [],
      baseUrl: 'http://47.92.118.35:9000/',
      noRelevantPictures: 'imges/noRelevantPictures.jpg',
      loadingStatus: true,
    };
  },

  created() {
    this.getPrice()
    this.getProductToSelect()
    this.getPlace()
    this.getMarket()
  },

  methods: {
    getProductToSelect(){
      selectAllProductAndImg().then((res) => {
        res.data.forEach(item => {
          this.productOptions.push(this.transformProductTree(item))
        });
      })
    },
    getPlace() {
      getPlaceList().then(res => {
        res.data.forEach((item, index) => {
          this.countyOptions.push({
            value: item,
            label: item,
          })
        })
      })
    },
    getMarket() {
      getMarketByCounty({
        county: this.queryParams.county
      }).then(res => {
        this.marketOptions = res.data
      })
    },
    getPrice() {
      this.loadingStatus = true
      if (this.queryParams.productItem != null && this.queryParams.productItem.length > 0) {
        this.queryParams.productId = this.queryParams.productItem[2].productId
      }
      getRecentlyPrice({
        productId: this.queryParams.productId,
        marketId: this.queryParams.marketId,
      }).then(res => {
        this.productMarketPriceList = res.data
        this.loadingStatus = false
      })
    },
    // 查询每个地区的市场
    changeCountyEvent(item) {
      this.getMarket()
      this.queryParams.marketId = null
    },
    marketClearEvent() {
      this.getPrice()
    },
    // 重构为树形结构 
    transformProductTree(obj) {
      // return {
      //   value: obj.agrProduct.productId,
      //   label: obj.agrProduct.productName,
      //   // children: (obj.productAndImgVoList || []).map(childData => this.transformProductTree(childData)),
      //   children: (obj.productAndImgVoList  || ![]).map(this.transformProductTree),
      //   imgUrl: obj.agrFile == null ? this.baseUrl + this.noRelevantPictures : this.baseUrl + obj.agrFile.filePath,
      // };

      /** 当obj.productAndImgVoList为空数组时不再有children属性 ,防止最后一层出现空数据 */
      return {
        value: obj.agrProduct.productId,
        label: obj.agrProduct.productName,
        children: obj.productAndImgVoList && obj.productAndImgVoList.length > 0 ?
                  obj.productAndImgVoList.map(this.transformProductTree) : undefined,
        // 用于得到选中时返回的对象
        returnValue: {
          productId: obj.agrProduct.productId,
          parentId: obj.agrProduct.parentId,
          productName: obj.agrProduct.productName,
          // imgUrl: obj.agrFile == null ? this.baseUrl + this.noRelevantPictures : this.baseUrl + obj.agrFile.filePath,
        }
      };
    },
    search() {
      this.getPrice()
    },
    reset() {
      this.queryParams = {
        county: null,
        marketId: null,
        productId: null,
        productItem: null,
      }
      this.getPrice()
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 300px;
  margin: 0 20px;
  text-align: center;
}
.card-container {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}

.card-item {
  width: calc(100% / 5); /* 每个卡片占据1/5的宽度 */
  margin: 20px 30px;
  // margin-right: 0.3%; /* 添加间距，根据实际情况调整 */
}

/* 考虑响应式设计，可以针对不同屏幕尺寸进行调整 */
@media (max-width: 768px) {
  .card-item {
    width: calc(100% / 3); /* 在较小屏幕上，每行显示3个卡片 */
  }
}

.image {
  max-width: calc(100% / 1.2);
  max-height: calc(100% / 1.2);
}
</style>